<template>
    <div class="user-info-page fill-height">
        <div class="user-info-content d-flex fill-height pa-5">

            <div class="d-flex flex-column justify-space-between fill-height overflow-y-auto pa-3 " style="min-width: 200px !important;">
                <i-xyz-transition-group
                        :delay="'3'"
                        :left="'1'"
                        :stagger="'1'"
                        class="d-flex flex-column"
                        mode="out-in">
                    <div
                            v-for="item in state.list"
                            :key="item"
                            :class="[state.active == item?'active':'']"
                            class="action transition-ease-in-out font-size-title-1 mb-3"
                            @click="()=>state.active = item"
                    >
                        {{ item }}
                    </div>
                </i-xyz-transition-group>
                <i-xyz-transition
                        :delay="'10'"
                        appear
                        class="d-flex flex-column"
                        down
                        mode="out-in">
                    <div class="action logout transition-ease-in-out font-size-title-1">退出登录</div>
                </i-xyz-transition>
            </div>

            <el-divider :direction="'vertical'" class="height-inherit py-12 mx-5"/>

            <i-xyz-transition
                    :left="'2'"
                    class="pa-3 flex-fill"
                    mode="out-in"
            >
                <InfoUser v-if="state.active == '个人信息'" :api="api"/>
                <InfoAccount v-else-if="state.active == '账号信息'" :user-api="api"/>
                <InfoMessage v-else-if="state.active == '消息通知'"/>
                <InfoLoginRecord v-else-if="state.active == '登录记录'"/>
                <InfoPolicy v-else-if="state.active == '隐私政策'"/>
            </i-xyz-transition>

        </div>
    </div>
</template>

<script lang="ts" setup>
import {UserApi} from "~/api/system/user";
import {useUserStore} from "~/store/modulers/user";
import {storeToRefs} from "pinia";
import {onMounted, reactive} from "vue";
import InfoUser from "~/views/system/user/info/InfoUser.vue";
import InfoAccount from "~/views/system/user/info/InfoAccount.vue";
import InfoMessage from "~/views/system/user/info/InfoMessage.vue";
import InfoLoginRecord from "~/views/system/user/info/InfoLoginRecord.vue";
import InfoPolicy from "~/views/system/user/info/InfoPolicy.vue";

const state = reactive({
    list: ["个人信息", "账号信息", "消息通知", "登录记录", "隐私政策"],
    active: "个人信息",
});

const api = new UserApi();
const userStore = useUserStore();
const {user} = storeToRefs(userStore);

onMounted(() => {
    api.getUserDetail(user.value.id as any);
});

</script>

<style lang="scss" scoped>
.user-info-page {
  padding: 48px;

  .user-info-content {
    border-radius: 8px;
    border: 1px var(--el-border-color) solid;
    box-shadow: var(--el-box-shadow);

    .action {
      border-radius: 4px;
      padding: 8px 24px;
      cursor: pointer;
      letter-spacing: 2px;
      text-align: center;

      &.active {
        background-color: var(--el-color-primary);
        color: var(--el-color-white);
        box-shadow: var(--el-box-shadow);
      }

      &:hover {
        background-color: var(--el-color-primary);
        color: var(--el-color-white);
        box-shadow: var(--el-box-shadow);
      }

      &.logout {
        background-color: var(--el-color-error);
        color: var(--el-color-white);

        &:hover {
          background-color: var(--el-color-error);
          color: var(--el-color-white);
          box-shadow: var(--el-box-shadow);
        }
      }
    }
  }
}
</style>
